<template>
	<view>
		<!-- 顶部搜索栏 -->
		<view class="search_bar">
			<view class="" style="display: flex;flex-direction: row;">
				<input class="search_input" type="text" v-model="search_input" value="" placeholder="输入查询人" placeholder-style="font-size: 26rpx;"/>
				<view class="search_btn" style="" @click="searchUser()">
					<image class="search_text" src="../../../static/client/sousuo.png" mode=""></image>
				</view>
			</view>
		</view>
		<view class="" style="width: 100%;height: 50rpx;"></view>
		<!-- 选择部门展示 -->
		<view class="department_line">
			<text @click="clickDepartment()">部门结构</text>
			<text v-show="!userShow " v-for="(item,index) in department_list"
			@click="clickDepartmentLine(item,index)"
				style="color: #40A0F2;margin-left: 10rpx;">{{'- ' + item.show_name}}</text>
		</view>
		<!-- 部门条目展示 -->
		<view class="me_change" v-show="userShow">
			<view class="me_change_item" v-for="item in bookList" @click="clickItem1(item)">
				<text style="margin-left: 60rpx;">{{item.showName}}</text>
				<text style="margin-left: 10rpx;">{{'(' + item.children.length + ')'}}</text>
				<image src="../../../static/me/jaintou.png"
					style="width: 18rpx; height: 34rpx;position: absolute;top: 30rpx;right: 30rpx;"></image>
			</view>
		</view>
 
		<!-- 部门员工信息 -->
		<view class="me_change" v-show=" !userShow ">
			<view class="me_change_item" v-for="item in userList" @click="clickItem2(item)"
				v-show="item.quit_status == '0'">
				<image :src="item.avatar" class="user_photo" style=""></image>
				<text style="margin-left: 20rpx;">{{item.show_name}}</text>
				<text v-show="item.is_department == '1'" style="margin-left: 10rpx;">{{'(' + item.children.length + ')'}}</text>
				<text v-show="item.is_department_head == '1'"
					style="font-size: 24rpx;margin-left: 10rpx;color: #40A0F2;">(主管)</text>
				<text v-show="item.admin_state == '1'"
					style="font-size: 24rpx;margin-left: 10rpx;color: #F4A029;">(管理员)</text>
				<image src="../../../static/me/jaintou.png"
					style="width: 18rpx; height: 34rpx;position: absolute;top: 30rpx;right: 30rpx;"></image>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				token: '',
				member_id: '',
				company_id: '',
				company_name: '',
				department_id: '',
				search_input:'',
				bookList: '',
				userList: '',

				userShow: true, //true显示部门 false显示人员
				department_list: [],
			}
		},
		onLoad() {
			this.token = uni.getStorageSync('btlh_process_token') || '';
			this.member_id = uni.getStorageSync('btlh_process_member_id') || '';
			this.company_id = uni.getStorageSync('bthl_process_LoginCompanyId') || '';
			this.company_name = uni.getStorageSync('bthl_process_LoginCompanyName') || '';

			uni.setNavigationBarTitle({
				title: this.company_name
			})
			this.getAddressBookList();
		},
		methods: {
			// 点击搜索
			async searchUser(){
				const res = await this.$myRequest({
					url: 'AdBook/search',
					method: 'GET',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
						search: this.search_input,
					}
				});
				this.userList = res.data.datas.member_list;
				this.userShow = false;
			},
			// 点击回到部门结构
			clickDepartment() {
				this.userShow = true;
				this.department_list = [];
			},
			
			// 点击部门栏
			clickDepartmentLine(item,index){
				this.userList = item.children;
				this.department_list = this.department_list.slice(0, index + 1);
			},
			
			// 点击员工栏
			clickItem2(item) {
				// 0是人员 1是部门
				if (item.is_department == '0') {
					console.log('itemid' + item.id)
					uni.navigateTo({
						url:'userInfo?id=' + item.id + '&url=' + item.avatar
					})
				} else {
					this.userList = item.children;
					//判断如果部门已加入tab栏则不加入
					if (!this.department_list.includes(item)) { 
						this.department_list.push(item);
					}
					
				}
			},

			// 点击部门
			clickItem1(item) {
				console.log(item)
				this.department_list.push(item);
				this.userList = item.children;

				this.userShow = false;
			},

			// 获取通讯录列表
			async getAddressBookList() {
				const res = await this.$myRequest({
					url: 'AdBook/index',
					method: 'GET',
					data: {
						member_id: this.member_id,
						token: this.token,
						company_id: this.company_id,
						department_id: this.department_id,
					}
				});
				this.bookList = res.data.datas.listInfo;

				console.log(this.bookList)
			},
		}
	}
</script>

<style lang="scss">
	.department_line {
		width: 100%;
		height: 80rpx;
		line-height: 80rpx;
		padding-left: 80rpx;
		font-size: 30rpx;
		font-weight: bold;
	}

	.user_photo {
		width: 44rpx;
		height: 44rpx;
		border-radius: 10rpx;
	}

	.me_change {
		width: 690rpx;
		margin-left: 30rpx;
		margin-top: 20rpx;

		.me_change_item {
			width: 100%;
			height: 91rpx;
			border-bottom: 1rpx solid #EFEFEF;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			display: flex;
			flex-direction: row;
			align-items: center;
			position: relative;
		}
	}

	.search_bar {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		margin-top: 10rpx;
	}

	.search_text {
		width: 40rpx;
		height: 40rpx;
		margin-left: 15rpx;
		margin-top: 10rpx;
	}

	.search_btn {
		background-color: #EBEEF5;
		width: 80rpx;
		height: 60rpx;
		border-radius: 0 15rpx 15rpx 0;
	}

	.search_input {
		width: 520rpx;
		height: 60rpx;
		background-color: #EBEEF5;
		border-radius: 15rpx 0 0 15rpx;
		padding-left: 10rpx;

	}
</style>
